<template>
	<u-popup :show="show" @close="close">
		<view class="mask">
			<view class="mask_close flex_center" @tap="close">
				<uni-icons type="closeempty"></uni-icons>
			</view>
			<view class="mask_content">
				<uni-calendar range insert @change="dateChange" />
			</view>
			<view class="mask_btns flex">
				<button class="mask_btn" @tap="close">取消</button>
				<button class="mask_btn confirm" @tap="confirm">确认</button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "popupView",
		props: ["show", "content"],
		data() {
			return {
				before: "",
				after: ""
			};
		},
		methods: {
			close() {
				this.$emit("popupClose")
			},
			confirm() {
				if (this.after == "" || this.before == "") {
					return this.close()
				}
				this.$emit("popupConfirm", {
					before: this.before,
					after: this.after
				})
			},
			dateChange(e) {
				console.log(e.range, "@@@@@@@@@")
				this.after = e.range.after
				this.before = e.range.before
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mask {
		padding: 40rpx;
		background: #fff;
		border-radius: 40rpx 40rpx 0px 0px;
		overflow: hidden;
		transition: all 0.25s linear 0s;

		.mask_close {
			width: 72rpx;
			height: 72rpx;
			background-color: hsla(0, 0%, 92.9%, .46);
			border-radius: 20rpx;
		}

		.mask_content {
			margin-top: 40rpx;
		}

		.mask_btns {
			column-gap: 40rpx;
			margin-top: 60rpx;

			.mask_btn {
				flex: 1;
				border-radius: 30rpx;
				padding: 10rpx 0;
				background-color: hsla(0, 0%, 92.9%, .46);
				font-size: 32rpx;
				font-family: PM;

				&:after {
					border: none;
				}
			}

			.confirm {
				background-color: #0065ff;
				color: #fff;
			}
		}
	}
</style>